<template>
    <div class="newLeftMenu">
  <!--    <div class="top">-->
  <!--      <i class="iconfont icon-matou2"></i>-->
  <!--    </div>-->
      <el-menu :default-active="$route.path"
               class="el-menu-vertical-demo" :unique-opened='true'
               @open="handleOpen"
               @select="linkTab"
               @close="handleClose">
        <el-submenu index="1" >
          <template slot="title">海关报关</template>
          <el-menu-item index="/shippingManifest">装载舱单</el-menu-item>
          <el-menu-item index="/originalManifest">原始舱单</el-menu-item>
          <el-menu-item index="/preFurnishedManifest">预配舱单</el-menu-item>
          <el-menu-item index="/logisticsLink">物流环节</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  
  </template>
  
  <script>
  export default {
    name: 'newLeftMenu',
    computed:{
      userType(){
        return this.$store.getters.userType
      },
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath)
      },
      linkTab(e) {
        this.$router.push(e)
      },
    },
  }
  </script>
  
  <style scoped lang="less">
  /deep/.el-menu-item.is-active {
    background-color: #0f47b8;
    color: white;
  }
  /deep/.el-submenu__title:hover {
    background-color: #0f47b8;
    color: white;
  }
  /deep/.el-menu-item:hover {
    background-color: #0f47b8;
    color: white;
  }
  /deep/.el-menu {
    border-right: none;
  }
  .newLeftMenu {
    background-color: white;
    width: 200px;
    // min-height: 700px;
  height: 80%;
    // height: 80rem;
    //max-height: 1200px;
    //height: 1200px;
    overflow-y: auto;
    overflow-x: hidden;
    .top {
      width: 100%;
      height: 47px;
      background-color: #e4e4e4;
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        font-size: 24px;
        color: rgba(119, 119, 119, 0.7);
      }
    }
  }
  </style>